<template>
  <div class="dashboard-editor-container">
    <div class="top-border">
      <div class="li-title">常用功能</div>
      <div class="common-border">
        <router-link v-for="(item, index) in commonList" :key="index" :to="item.url">
          <div class="common-title">
            <span>{{ item.name }}</span>
            <!-- <span class="common-icon iconfont" :class="item.icon"></span> -->
            <svg-icon class="common-icon iconfont" :icon-class="item.icon" />
          </div>
        </router-link>
      </div>
    </div>
    <div class="li-border">
      <div class="li-title">我的工作</div>
      <div class="li-content-border">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <!-- 我的待办 -->
          <el-tab-pane label="我的待办" name="todo">
            <div slot="label" class="tab-title">
              <i class="el-icon-circle-check"></i> 我的待办
            </div>
            <todo ref="todoRef"></todo>
          </el-tab-pane>
          <!-- 我的已办 -->
          <el-tab-pane label="我的已办" name="finished">
            <div slot="label" class="tab-title">
              <i class="el-icon-time"></i> 我的已办
            </div>
            <finished ref="finishedRef"></finished>
          </el-tab-pane>
          <!-- 我发起的 -->
          <el-tab-pane label="我发起的" name="own">
            <div slot="label" class="tab-title">
              <i class="el-icon-user"></i> 我发起的
            </div>
            <own ref="ownRef"></own>
          </el-tab-pane>
          <!-- 抄送我的 -->
          <el-tab-pane label="抄送我的" name="copy">
            <div slot="label" class="tab-title">
              <i class="el-icon-document"></i> 抄送我的
            </div>
            <copy ref="copyRef"></copy>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import todo from '@/views/staging/todo.vue';
import finished from '@/views/staging/finished.vue';
import own from '@/views/staging/own.vue';
import copy from '@/views/staging/copy.vue';

export default {
  components: { todo, finished, own, copy },
  data () {
    return {
      activeName: 'todo',
      commonList: [
        {
          name: "合同信息", icon: "dict", url: '/base/bsContractInfo'
        },
        { name: "报表管理", icon: "date", url: '/cm/reportForm' },
        { name: "开票汇总", icon: "cascader", url: '/cm/billingSummary' },
      ],
    };
  },
  created () {
    this.handleClick();
  },
  methods: {
    handleClick () {
      this.$nextTick(() => {
        console.log(this.activeName);
        switch (this.activeName) {
          case 'todo':
            if (this.$refs.todoRef) {
              this.$refs.todoRef.getList();
            }
            break;
          case 'finished':
            if (this.$refs.finishedRef) {
              this.$refs.finishedRef.getList();
            }
            break;
          case 'own':
            if (this.$refs.ownRef) {
              this.$refs.ownRef.getList();
            }
            break;
          case 'copy':
            if (this.$refs.copyRef) {
              this.$refs.copyRef.getList();
            }
            break;
          default:
            break;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

.top-border {
  .common-border {
    padding: 16px;
    display: flex;

    .common-title {
      margin-right: 30px;
      width: 202px;
      height: 80px;
      border: 1px solid #409EFF75;
      border-radius: 4px;
      background-color: #d9ecff75;
      color: #409EFF;
      font-size: 22px;
      line-height: 2;
      line-height: 80px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;

      &:hover {
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
      }
    }

    .common-icon {
      font-size: 30px;
    }
  }
}



.li-border,
.top-border {
  position: relative;
  // padding: 16px;
  margin-bottom: 32px;
  background-color: #ffffff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);

  .li-title {
    border-radius: 4px 4px 0 0;
    padding: 16px;
    background-color: #f5f5f5;
    font-weight: bold;
    font-family: inherit;
    font-size: 24px;
    line-height: 1.1;
  }



  .li-content-border {
    padding: 16px;

    .li-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      color: #666;
      line-height: 2;


      .note {
        width: calc(100% - 120px);
        cursor: pointer;
        overflow: hidden;
        /* 隐藏溢出的内容 */
        white-space: nowrap;
        /* 不允许文本换行 */
        text-overflow: ellipsis;
        /* 使用省略号表示文本溢出 */
      }

      .time {
        width: 80px;
        text-align: right;
      }
    }
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}

.tab-title {
  padding: 5px 10px;
  // background: #f3f9ff;
}
</style>
